<template>
  <div class="product-list">
    <div class="product" v-for="(product, index) in products" :key="index">
      <div class="product-image">
        <img :src="product.images" width="340px" height="200px" alt="product" />
      </div>
      <div class="product-details">
        <div class="product-name">{{ product.name }}</div>
        <div class="product-description">{{ product.desc }}</div>
        <div class="product-price">¥{{ product.price }}</div>
        <el-button type="primary" @click="addToCart(product)"
          >加入购物车</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      cart: [],
    };
  },
  created() {
    this.show();
  },
  methods: {
    show() {
      this.axios
        .get("http://localhost:48543/api/Goods/GetGoods")
        .then((res) => {
          this.products = res.data;
        });
    },
    addToCart(product) {
      console.log(product);
      this.axios({
        method: "post",
        url: "http://localhost:48543/api/Shop/AddShopCar",
        data: {
          sid: 0,
          uid: localStorage.getItem("uid"),
          gid: product.id,
          name: product.name,
          desc: product.desc,
          images: product.images,
          price: product.price,
          goodsNum: 1,
        },
      });
      this.$message.success("成功加入购物车！");
    },
  },
};
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  width: 300px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.product-image {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
}

.product-details {
  padding: 20px;
}

.product-name {
  font-size: 20px;
  margin-bottom: 10px;
}

.product-description {
  margin-bottom: 10px;
}

.product-price {
  font-size: 20px;
  margin-bottom: 20px;
}

.el-button {
  margin-top: 10px;
}
</style>